import React, {Component} from 'react'
import { TabBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom'
import '../../../index.css'

class TabList extends Component{
  render(){
    const TabBarItem = TabBar.Item
    const list = this.props.data.filter(v => !v.hidden)
    const { pathname } = this.props.location
    return (
      <TabBar
        unselectedTintColor="#949494"
        tintColor="#33A3F4"
        barTintColor="white"
        className='fixed-bottom-tab-bar'
        tabBarPosition='bottom'
      >
      {
          list.map(v =>{
            return (
              <TabBarItem
                title={v.text}
                key={pathname}
                icon={{ uri: require(`../../../static/dashboard-img/${v.icon}.png`)}}
                selectedIcon={{ uri: require(`../../../static/dashboard-img/${v.icon}-active.png`) }}
                selected={v.path === pathname}
                badge={1}
                onPress={() => {
                  this.props.history.push(v.path)
                }}
              >
              </TabBarItem>
            )
          })
      }
      </TabBar>
    )
  }
}

export default withRouter(TabList)